{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'cropperjs',
        eyebrowText: 'Craft the perfect image'
    } %}
        {% block title_header %}
            Crop Photos with <em>Cropper.js</em>
        {% endblock %}

        {% block sub_content %}
            Let your users crop images with <a class="font-white text-underline" href="https://github.com/fengyuanchen/cropperjs" rel="noopener nofollow noreferrer">Cropper.js</a>
             then grab the final image from PHP. Simple.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="src/Controller/UxPackage/CropperjsController.php" height="270px" />
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
        filename="templates/ux_packages/cropperjs.html.twig"
        height="270px"
        targetTwigBlock="demo_content"
    />
{% endblock %}

{% block demo_title %}UX Cropper.js{% endblock %}

{% block demo_content %}
    {% if croppedImage is null %}
        {{ form_start(form) }}
        <div class="row">
            <div class="col-9">{{ form_widget(form) }}</div>
            <div class="col-3">
                <div id="cropper-preview" style="overflow: hidden;width: 200px;height: 200px;"></div>
            </div>
        </div>
            <button type="submit" class="btn btn-dark mt-5" style="width: 100%;">Crop it!</button>
        {{ form_end(form) }}
    {% else %}
        {# show the cropped image after submit! #}
        <div class="row">
            <div class="col-9">
                <figure class="figure">
                    <img src="{{ croppedImage }}" class="figure-img img-fluid rounded" alt="Cropped image">
                    <figcaption class="figure-caption">The cropped image.</figcaption>
                </figure>
            </div>
            <div class="col-3">
                <figure class="figure">
                    <img src="{{ croppedThumbnail }}" class="figure-img img-fluid rounded" alt="Cropped thumbnail">
                    <figcaption class="figure-caption">A thumbnail of the cropped image.</figcaption>
                </figure>
            </div>
        </div>
    {% endif %}
{% endblock %}
